<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>值绑定</title>
        <style>
            .wrapper { border: 1px solid blue ; }
            .wrapper>div { padding: 10px; border: 1px solid gray; margin: 10px; }
            input[type=text] { width: 80%; }
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                <div class="first">
                    <input type="text" v-bind:value="content" v-on:input="modify">
                    <p>content: {{ content }}</p>
                </div>
                <div class="second">
                    <input type="text" v-model="username">
                    <p>username: {{ username }}</p>
                </div>
                <div class="third">
                    <!-- `toggle` 只会为 true 或 false -->
                    <input type="checkbox" v-model="toggle"> 通过 checkbox 切换 数据属性 的值
                    <p>{{toggle}}</p>
                </div>
                <div class="fourth">
                    <input type="checkbox" v-model="logined" true-value="免登录" false-value="需登录">一周内免登录
                    <p>{{logined}}</p>
                </div>
                <div class="fifth">
                    <input type="checkbox" 
                           v-model="fifthLogined" 
                           v-bind:true-value="must" 
                           v-bind:false-value="wuxu">
                    一周内免登录
                    <p>{{fifthLogined}}</p>
                </div>
            </div>
        </div>

        <a href="https://cn.vuejs.org/guide/essentials/forms.html">表单输入绑定(vue.js)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        content: '你要好好学习Vue的套路，以便于骗其他人学Vue',
                        username: 'afang',
                        toggle: true,
                        logined: '需登录',
                        fifthLogined: '你必须登录',
                        wuxu: '你必须登录',
                        must: '无需登录'
                    }
                },
                methods: {
                    modify(evt) {
                        let input = evt.target;
                        this.content = input.value;
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>